<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false
                   const student =Vue.extend({
                data(){
                    return {studentName:'赵云',age:18}
                },
                template:`
                        <div>
                            <h3>{{studentName}}</h3>    
                            <h3>{{age}}</h3>    
                        </div>
                    `,
            })
            const school = Vue.extend({
                template:`
                    <div>
                        <h3>{{schoolName}}</h3>    
                        <h3>{{address}}</h3>
                        <hr/>
                        <student></student>
                    </div>
                `,
                data(){
                    return {schoolName:'尚硅谷',address:'北京',n:1}
                },
                components:{
                    student
                }
            })
            const hello = Vue.extend({
                template:`<h2>hello</h2>`
            })
            const app =Vue.extend({
                data(){
                    return {studentName:'赵云',age:18}
                },
                template:`
                    <div>
                        <hello></hello>
                        <school></school>
                    </div>
                        
                `,
                components:{hello,school}

            })
            const vm = new Vue({
                el:'#root' ,
                template:`
                    <app></app>
                `,
                components:{
                    app,hello
                },
            })
        </script>
    </body>
</html> 